<!--
 * @Author: wjk
 * @Date: 2019-12-31 15:40:51
 * @LastEditors: wjk
 * @LastEditTime: 2019-12-31 15:51:20
 * @description: 拼团列表页
 -->
<template>
  <base-page-view class-name="page-container">
    <view>
      <image v-if="banner && banner.pic" class="banner" :src="banner.pic" alt="" mode="widthFix" @click="toDetail()" />
      <b-image v-else class="banner" :is-asset="true" :need-clip="false" width="750" src="/static/images/commodity/gropu_buy_banner.png" alt="" mode="widthFix" />
      <!--list-->
      <view class="list-con">
        <!--<view style=" background: black; width: 100%; height: 50px      ; color: #fff" @click="goToResult">拼单结果页调试</view>-->
        <scroll-view scroll-x="true" class="tab-nav" :scroll-into-view="itemId" :scroll-with-animation="true">
          <view class="nav-item" :class="{'active': selectedIndex === 0}" @click="onItemClick('')">全部</view>
          <view
            v-for="(item, index) in categoryList"
            :key="index"
            :class="{'active': selectedIndex - 1 === index}"
            class="nav-item">
            <view @click="onItemClick(item, index)">{{ item.name }}</view>
          </view>
        </scroll-view>

        <view v-for="(item, index) in list" :key="index" class="card" :class="{ last: index===list.length-1, first: index === 0 }" @click="openGoods(item)">
          <view class="img"><b-image mode="aspectFit" :src="item.majorPic" alt="" /></view>
          <view class="info">
            <view class="title">{{ item.promotionName }}</view>
            <view class="group-info">
              <view class="span">{{ item.groupNeedNum }}人团</view>
              已拼{{ numberChange(item.alreadyGroupGoodsNum) }}件
            </view>
            <view class="price">
              <view class="b">¥{{ item.groupPrice.toFixed(2) }}</view>
              <view class="small">单买价¥{{ item.goodsPrice.toFixed(2) }}</view>
            </view>
            <view class="btn">去拼单</view>
          </view>
        </view>
        <base-list-state :list-length="listLength" :list-query="listQuery" :list-state="goodsState" :list-empty="listEmpty" />
      </view>
    </view>
  </base-page-view>
</template>

<script>
import { toGoods, toFunctionDetail } from '@/utils/navigateTo'
import './index.scss'
export default {
  components: {
  },
  data() {
    return {
      banner: {},
      categoryList: [],
      showEmpty: false,
      hideNav: false,
      loading: false,
      title: '拼团购',
      selectedIndex: 0,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      goodsState: {
        loading: false,
        more: true
      },
      list: [],
      listEmpty: {
        type: 'empty_network',
        text: '暂无数据哦~~'
      },
      mescroll: null// 加载对象
    }
  },
  computed: {
    listLength() { // 由于微信小程序无法自动更新base-list-state组件,故采用computed
      return this.list.length
    },
    itemId() {
      return 'item' + this.selectedIndex
    }
  },
  created() {
  },
  onLoad() {
    this.initBaseInfo()
    this.getBannerCategory()
  },
  onShow() {

  },
  onReachBottom() {
    this.load()
  },
  methods: {
    goToResult() {
      // this.$navigateTo('/pagesMine/address/address?type=select') 20200410092758043931798
      // this.$navigateTo('/pagesActivity/group-buy/result?group_id=49556')
      // this.$navigateTo('/pagesOrder/orderDetail/index?orderNo=20200410092758043931798', '', 'redirectTo')
      // this.$navigateTo('/pagesActivity/group-buy/result?group_id=&order_no=20200410092758043931798')
      // this.$navigateTo('/pagesDetail/commodity/index?from_type=25&pack_type=1&group_id=49568&group_buying_id=394&id=114228&goods_type=1')
    },
    onItemClick(item, index) {
      if (item === '') {
        this.selectedIndex = 0
      } else {
        this.selectedIndex = (index !== undefined ? Number(index + 1) : 0)
      }
      this.listQuery.categoryId = (item ? item.id : '')
      this.listQuery.pageNo = 1
      this.goodsState.more = true
      this.initBaseInfo()
    },
    // 广告转跳
    toDetail() {
      const item = this.banner
      toFunctionDetail(item, this)
    },
    // 文字转换
    numberChange(val) {
      let num = val
      if (JSON.stringify(num).length >= 5) {
        num = JSON.stringify(val)
        num = (num / 10000).toFixed(2) + '万'
      }
      return num
    },
    // 广告和类目
    getBannerCategory() {
      this.$api.promoteApi.getBannerAndCategory().then(res => {
        if (res.data) {
          this.banner = res.data.ad && res.data.ad.length > 0 ? res.data.ad[0] : {}
          this.categoryList = res.data.categoryList
        }
      })
    },
    load() {
      if (!this.goodsState.more) {
        return
      }
      this.goodsState.loading = true
      this.listQuery.pageNo += 1
      this.$api.promoteApi.getGroupBuyPages(this.listQuery).then(res => {
        const result = res.data
        if (result.length === 0) {
          this.listQuery.pageNo -= 1
          this.loading = false
          return
        }
        const arr = Object.assign([], this.list)
        const arr2 = arr.concat(result)
        this.list = arr2
        if (result.length < this.listQuery.pageSize) {
          this.goodsState.more = false
        }
        this.goodsState.loading = false
      }).catch(e => {
        this.listQuery.pageNo -= 1
        this.goodsState.loading = false
      })
    },
    // 获取活动分页列表
    async initBaseInfo() {
      const res = await this.$api.promoteApi.getGroupBuyPages(this.listQuery)
      this.list = res.data
      if (this.list.length <= 0) {
        this.showEmpty = true
      } else {
        this.showEmpty = false
      }
    },
    openGoods(item) {
      // 转换添加参数
      item.from_type = item.fromType
      item.type = item.goodsType
      item.goods_id = item.goodsId
      item.group_buying_id = item.groupBuyingId
      this.$sensorTrack('buttonClick', {
        button_name: '点击拼团商品',
        button_key: 'group_goods_click',
        groups_promotion_name: '拼团购',
        groups_goods_title: item.promotionName
      })
      // 转跳商品
      const firstseat = uni.getStorageSync('firstseat')
      toGoods(item, 'navigateTo', {
        preseat: '拼团列表',
        firstseat: firstseat || '拼团列表'
      })
    }
  },
  onPullDownRefresh() {
    const item = {
      id: this.listQuery.categoryId ? this.listQuery.categoryId : ''
    }
    let index
    if (this.selectedIndex === 0) {
      index = undefined
    } else {
      index = this.selectedIndex - 1
    }
    this.onItemClick(item, index)
    uni.stopPullDownRefresh()
  }

}
</script>
